<template>
    <div class="occupationdetails">
        <!-- 头部 -->
        <div class="content_l1000">
            <div class="conent_l1101">
                <!-- 左边内容 -->
                <div class="conten_l111">
                    <span class="span_l1000 fontsize_14 color_808080">以太创服招聘</span>
                    <div class="content_l1100"><strong class="color_808080 ">UI设计师</strong></div>
                    <div class="fontsize_16 content_l1101">
                        <span class="color25598 span_l1101">8k-12k</span>
                        <span class="color_56561">/北京/经验1-3年/大专/全职</span>
                    </div>
                    <div class="content_l1200">
                        <span class="span_l1201" v-for="item in labelList">{{ item }}</span>
                    </div>
                    <span class="fontsize_14 color_1616161">1天前发布于拉钩网</span>
                </div>
                <!-- 右边按钮 -->
                <div class="content_l1202">
                    <div class="fontsize_14 content_l1201">
                        <button class="btn_l1200">
                            <img src="../assets/shouang(green).svg" class="image_l1200">
                            <!-- <img src="../assets/shoucang(white).svg" class="image_l1200"> -->
                            收藏
                        </button>
                        <button class="btn_l1200">投个简历</button>
                    </div>
                    <div class="content_l3000 fontsize_14">
                        <div class="content_l3300">
                            <img src="../assets/61.svg" class="image_l1300">
                            <router-link to="" class=" color_1616161">完善在线简历</router-link>
                        </div>
                        <div class="content_l3300">
                            <img src="../assets/61_2.svg" class="image_l1300">
                            <router-link to="" class=" color_1616161">上传附件简历</router-link>
                        </div>
                    </div>
                    <div class="dis_flex content_l4000">
                        <img src="../assets/67.svg" class="image_l4000">
                        <img src="../assets/inlink.svg" class="image_l4000 border_lr">
                        <img src="../assets/wechat.png" class="image_l4000 border_lr">
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体内容 -->
        <div class="container">
            <!-- 左边 -->
            <div class="content_c1000">
                <!-- 职位描述 -->
                <div class="color_808080 ">
                    <div class="content_c1100">
                        <span class="fontsize_18 marg_top20">职位诱惑:</span>
                        <span class="marg_top10 fontsize_14">青春活力、发展空间大</span>
                        <span class="fontsize_18 marg_top20">职位描述:</span>
                        <span class="marg_top10 marg_bottom20 fontsize_14">岗位职责</span>
                        <ol class="marg_top20 marginleft_10 fontsize_14">
                            <li class="marg_bottom20">
                                负责公司线上业务（京东、天猫等电商平台）的文案编辑工作。撰写商品详情页文案，单品策划文案，线上平台主题活动广告，品牌宣传文案，各种促销及营销文案；
                            </li>
                            <li class="marg_bottom20">
                                负责公司上线业务的文案编写工作。
                            </li>
                            <li class="marg_bottom20">
                                负责公司上线业务的文案编写工作。
                            </li>
                        </ol>
                        <span class="marg_top10 marg_bottom20 fontsize_14">认职资格</span>
                        <ol class="marg_top20 marginleft_10 fontsize_14">
                            <li class="marg_bottom20">
                                负责公司上线业务的文案编写工作。
                            </li>
                        </ol>
                        <span class="marg_top10 marg_bottom20 fontsize_14">福利待遇</span>
                        <span class="marg_top10 marg_bottom20 fontsize_14">五险一金、全勤奖</span>
                        <span class="fontsize_18 marg_top20">工作地址:</span>
                        <div class="fontsize_14 marg_top20 marg_bottom20 dis_flex content_c4000">
                            <div><span class="color_1791381">北京</span>-<span class="color_1791381">海淀区</span>-<span class="color_1791381">苏州街</span>-长远天地大厦A2座20层</div>
                            <router-link to="" class="link_c4400">查看地图</router-link>
                        </div>
                        <!-- 职位发布者 -->
                        <span class="fontsize_18 marg_top20">职位发布者:</span>
                        <div class="dis_flex content_c5000">
                            <!-- 岗位发布人 -->
                            <div class="dis_flex content_c5001">
                                <div class="content_c5501">万</div>
                                <div class="content_l3300 content_c5502">
                                    <span class="content_l3300">
                                        王女士
                                        <img src="../assets/90.svg" class="image_l1300">
                                    </span>
                                    <span class="fontsize_14 span_c5501">职位发布者</span>
                                </div>
                            </div>
                            <!-- HR状态信息 -->
                            <div class="dis_flex content_c5512">
                                <div class="content_c5510">
                                    <div class="dis_center">
                                        <span class="fontsize_14">聊天意愿</span>
                                        <img src="../assets/wenhao.svg" class="image_c5500">
                                    </div>
                                    <span class="fontsize_18 span_c5511">一般</span>
                                    <div class="fontsize_12">
                                        <span class="color_1616161">回复率</span><span class="color25598">25%</span><span class="color_1616161">用时</span><span class="color25598">7</span><span class="color_1616161">分钟</span>                                        
                                    </div>
                                </div>
                                <!-- 装饰竖线 -->
                                <div class="vline"></div>
                                <div class="content_c5510">
                                    <div class="dis_center">
                                        <span class="fontsize_14">简历处理</span>
                                        <img src="../assets/wenhao.svg" class="image_c5500">
                                    </div>
                                    <span class="fontsize_18 span_c5511">超快</span>
                                    <div class="fontsize_12">
                                        <span class="color_1616161">处理率</span><span class="color25598">100%</span><span class="color_1616161">用时</span><span class="color25598">1</span><span class="color_1616161">天</span>                                        
                                    </div>
                                </div>
                                 <!-- 装饰竖线 -->
                                <div class="vline"></div>
                                <div class="content_c5510">
                                    <div class="dis_center">
                                        <span class="fontsize_14">活跃时段</span>
                                        <img src="../assets/wenhao.svg" class="image_c5500">
                                    </div>                                    
                                    <span class="fontsize_18 span_c5511">下午</span>
                                    <div class="fontsize_12">
                                        <span class="color_1616161">下午</span><span class="color25598">1</span><span class="color_1616161">点最活跃</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 面试评价 -->
                <div class="content_c6000">
                    <div class="content_c6600">
                        <span class="fontsize_18 color_808080 span_c6600">面试评价</span>
                        <div class="hline"></div>
                    </div>
                    <div class="content_c6601">
                        <div class="content_c6600 fontsize_14">
                            <img src="../assets/96.svg" class="image_height54">
                            <span>该职位尚未收到面试评价 ,看看该公司<router-link to="/interviewappraisal" class="link_c4400">其他职位的面试评价</router-link></span>
                        </div>
                    </div>
                    <!-- 岗位推荐 -->
                    <div class="content_c6600">
                        <span class="fontsize_18 color_808080 span_c6601">看了此职位的人还会看</span>
                        <div class="hline"></div>
                        <router-link to="" class="link_c4400 fontsize_14 link_c6000">查看更多</router-link>
                    </div>                    
                </div>
                <div class="dis_flex marg_bottom20">
                    <div class="content_c7000 fontsize_14" v-for="item in tipList.slice(0,5)">
                        <img src="../assets/189.jpg" class="image_c6600">
                        <span class="color_808080">{{ item.post }}</span>
                        <span class="color25598">{{ item.salary }}</span>
                        <span class="color_1616161">{{ item.company }}</span>
                    </div>
                </div>
                <!-- 底部链接栏 -->
                <div class="content_f8000">
                    <div class="fontsize_14 color_1616161">
                        <span>推荐公司:</span>
                        <a :href="item.url" class="link_f8000" v-for="item in companyLinkList.slice(0,6)">{{ item.company }}</a>
                    </div>
                    <div class="text_l5001">
                        <input type="checkbox"  id="toggle" v-model="toggle" class="toggle" hidden>
                        <div class="panel">
                            <div  class="text_l50003" v-for="item in companyLinkList.slice(7,)"><a class="fontsize_14 color_128128" :href="item.url">{{ item.company }}</a></div>
                        </div>
                        <label for="toggle" class="trigger">
                            <!-- 展开▾ -->
                        {{ this.toggle ? "折叠▴" : "展开▾" }}
                        </label>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="conten_r1000">
                <!-- 头部 -->
                <div class="marg_bottom40">
                    <div class="content_r2000">
                        <img src="../assets/104.jpg" class="iamge_r1000">
                        <div class="span_r2000 fontsize_16 color_808080">
                            <span>以太创服</span>
                            <img  src="../assets/71.svg" class="image_l4400">
                        </div>
                    </div>
                    <div class="marg_top20">
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/101.svg" class="image_l1300">
                            <span class="color_1616161">电子商务</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/102.svg" class="image_l1300">
                            <span class="color_1616161">不需要融资</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/103.svg" class="image_l1300">
                            <span class="color_1616161">50-150人</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/104.svg" class="image_l1300">
                            <span class="color_1616161">wwwxiaopiu.com</span>
                        </div>
                    </div>
                </div>
                <!-- 中间部分 -->
                <div class="">
                    <div>
                        <div class="content_c6600">
                            <span class="fontsize_14 color_808080 span_c6600">相似职位</span>
                            <div class="hline"></div>
                        </div>  
                        <!-- 单个列表样式 -->
                        <div class="marg_top20 dis_flex content_c2200 marg_bottom40" v-for="item in recommendCompanyList.slice(0,4)">
                            <img :src="item.image" class="image_c2000">
                            <div class="contentc2000">
                                <span class="fontsize_16 color_808080">{{ item.company }}</span>
                                <span class="fontsize_14 color25598">{{ item.salary }}</span>
                                <span class="fontsize_14 color_1616161">{{ item.area }}</span>
                            </div>
                        </div> 
                        <!-- 查看更多相似职位 -->
                        <div class="dis_center">
                            <router-link to="" class="link_f1000">查看更多相似职位</router-link>
                            <img src="../assets/175.svg" class="image_f1000">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"
export default{
    name: 'OccupationDetails',
    data(){
        return{
            tipList:[
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
            ],
            companyLinkList:[
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'喜马拉雅',url:'https://www.ximalaya.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'喜马拉雅',url:'https://www.ximalaya.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'喜马拉雅',url:'https://www.ximalaya.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'喜马拉雅',url:'https://www.ximalaya.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
                {company:'喜马拉雅',url:'https://www.ximalaya.com/'},
                {company:'美柚',url:'https://www.meiyou.com/'},
            ],
            recommendCompanyList:[
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
            ],
            toggle:false,
            labelList:[
                '电商编辑','软文','内容',
            ],
        }
    }

}
</script>

<style scoped>

/* 共用样式 */
    .fontsize_18{
        font-size: 18px;
    }

    .fontsize_16{
        font-size: 16px;
    }

    .fontsize_14{
        font-size: 14px;
    }

    .fontsize_12{
        font-size: 12px;
    }

    .color_8585851{
        color: rgba(85, 85, 85, 1);
    }

    .color_1616161{
        color: rgba(166, 166, 166, 1);
    }

    .color_128128{
        color: rgba(128, 128, 128, 1);
    }

    .color_1791381{
        color: rgba(76, 176, 141, 1);
    }

    .color_56561{
        color: rgba(56, 56, 56, 1);
    }

    .color_808080{
        color: rgba(80, 80, 80, 1);
    }

    .color25598{
        color: rgba(255, 98, 0, 1);
    }

    .backcolor_1791381{
        background-color: rgba(76, 176, 141, 1);
    }

    .backcolor_229229229{
        background-color: rgba(229, 229, 229, 1);
    }

    .backcolor_250250250{
        background-color: rgba(250, 250, 250, 1);
    }

    .border{
        border: rgba(229, 229, 229, 1) solid 1px;
    }

    .border_left{
        border-left: rgba(229, 229, 229, 1) solid 1px;
    }

    .color_white{
        color: white;
    }

    .border_none{
        border: none;
        background-color: transparent;
    }

    .text_h1005{
        margin-top: 5px;
    }

    .margintop_8{
        margin-top: 8px;
    }

    .font_weight{
        font-weight: bold;
    }

    .dis_flex{
        display: flex;
    }

    .dis_center{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .marg_top20{
        margin-top: 20px;
    }

    .marg_top10{
        margin-top: 10px;
    }

    .label_l4400{
        position: absolute;
        height: 60px;
        width: 60px;
        font-size: 10px;
        display: flex;
        justify-content: center;
        color: white;
        background-color: rgba(255, 98, 0, 1);
        clip-path: polygon(0 0, 65% 0, 0 65%);
    }

    .marg_bottom20{
        margin-bottom: 20px;
    }

    .marg_bottom40{
        margin-bottom: 40px;
    }

    .marginleft_10{
        margin-left: 10px;
    }

    .vline{
        margin-left: 15px;
        height: 60px;
        width: 1px;
        background-color: rgba(166, 166, 166, 1);
        transform: rotate(90edg);
    }

    .hline{
        width: 100%;
        height: 1px;
        background-color: rgba(221, 220, 220, 1);
    }

/*  */



    .container{
        margin-left: 200px;
        width: 80%;
        margin-bottom: 80px;
        display: flex;
    }

    .content_c1000{
        width: 65%;
        padding-right: 50px;
        border-right: rgba(229, 229, 229, 1) solid 4px;
    }

    .content_c1100{
        display: flex;
        flex-direction: column;
    }

    .content_l1000{
        height: 300px;
        background-color: rgba(242, 245, 244, 1);
        display: flex;
    }

    .conent_l1101{
        margin-left: 200px;
        width: 80%;
        margin-top: 120px;
        display: flex;
        justify-content: space-between;
    }

    .conten_l111{
        flex: 6;
    }

    .content_l1100{
        margin-bottom: 16px;
        font-size: 30px;
    }

    .span_l1000{
        margin-bottom: 8px;
    }
    
    .content_l1101{
        margin-bottom: 10px;
    }

    .span_l1101{
        margin-right: 8px;
    }
    
    .content_l1200{
        margin-bottom: 8px;
    }

    .content_l1202{
        flex: 1.8;
    }

    .content_l1201{
        display: flex;
        justify-content: space-between;
    }

    .span_l1201{
        padding: 3px 8px;
        margin-right: 8px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 1);
    }

    .btn_l1200{
        width: 130px;
        height: 50px;
        color: rgba(0, 179, 138, 1);
        background-color: transparent;
        border-radius: 3px;
        border: rgba(0, 179, 138, 1) solid 1px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image_l1200{
        height: 20px;
        margin-right: 5px;
    }

    .btn_l1200:hover{
        color: white;
        background-color: rgba(0, 179, 138, 1);
    }

    .content_l3000{
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
    }

    .content_l3300{
        display: flex;
        align-items: center;
    }
    
    .image_l1300{
        height: 18px;
        margin-right: 15px;
    }

    .content_l4000{
        margin-top: 20px;
        justify-content: end;
    }

    .image_l4000{
        height: 20px;
        padding: 0px 15px;
        filter: saturate(0)
    }

    .border_lr{
        border-left: rgba(184, 183, 183, 1) solid 1px;
    }

    .content_c4000{
        display: flex;
        justify-content: space-between;
    }

    .link_c4400{
        text-decoration: none;
        color:rgba(0, 179, 138, 1);
    }

    .content_c5000{
        display: flex;
    }

    .content_c5001{
        margin: 8px 0;
    }

    .content_c5501{
        font-size: 34px;
        color: rgba(55, 169, 252, 1);
        border:rgba(55, 169, 252, 1) solid 2px;
        padding: 8px 15px;
        border-radius: 50%;
    }

    .content_c5502{
        margin-left: 10px;
        flex-direction: column;
        justify-content: center;
    }

    .span_c5501{
        margin-top: 5px;
        color: rgba(128, 128, 128, 1);
    }

    .content_c5512{
        flex: 1;
        justify-content: end;
    }

    .content_c5510{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 30px;
    }

    .image_c5500{
        height: 18px;
        margin-left: 2px;
    }

    .span_c5511{
        margin: 10px 0;
    }

    .content_c6000{
        margin-top: 40px;
    }

    .content_c6600{
        display: flex;
        align-items: center;
    }

    .content_c6601{
        margin: 50px 0;
        display: flex;
        justify-content: center;
    }

    .span_c6600{
        width: 100px;
    }

    .image_height54{
        height: 54px;
    }

    .span_c6601{
        font-size: 18px;
        margin-right: 10px;
        width: 280px;
        color: rgba(80, 80, 80, 1);
    }

    .link_c6000{
        width: 90px;
        margin-left: 10px;
    }

    .content_c7000{
        margin-left: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image_c6600{
        height: 67px;
        width: 67px;
        margin-bottom: 6px;
    }

    .content_f8000{
        margin-top: 50px;
    }

    .link_f8000{
        color: rgba(128, 128, 128, 1);
        margin-left: 30px;
        /* display: inline-block; */
    }

    .text_l5001{
        height: 42;
        display: flex;
        align-items: center;
        position: relative;
    }

    /* 1. 控制开关 */
    .toggle:checked  + .panel {
    max-height: 300px;   /* 比真实内容大一些即可 */
    opacity: 1;
    transform: scaleY(1);
    flex: 1;
    }

        /* 2. 面板默认收起状态 */
    .panel {
    max-height: 0;       /* 关键：让高度从 0 开始 */
    overflow: hidden;
    opacity: 0;
    transform-origin: top;
    transform: scaleY();
    transition: max-height .35s ease,
                opacity   .25s ease,
                transform .35s ease;
    flex: 1;
    }

    /* 3. 触发器样式（可随意改） */
    .trigger {
    width: 40px;
    font-size: 14px;
    color: rgba(166, 166, 166, 1);
    cursor: pointer;
    user-select: none;
    text-align: right;
    position: absolute;
    right: 0;
    top: -20px;
    }

    .text_l50003{
        margin-top: 8px;
        display: inline-block;
        width: 10%;
    }

    .conten_r1000{
        /* background-color: aqua; */
        margin-top: 20px;
        margin-left: 30px;
    }

    .content_r2000{
        display: flex;
    }

    .iamge_r1000{
        height: 115px;
    }

    .image_l4400{
        margin-left: 5px;
        height: 20px;
    }

    .content_r3000{
        margin-top: 8px;
        display: flex;
        align-items: center;
    }

    .span_r2000{
        margin-left: 20px;
        display: flex;
        align-items: end;
    }

    .content_c2200{
        padding-bottom: 25px;
        border-bottom: rgba(229, 229, 229, 1) dashed 2px;        
    }

    .image_c2000{
        height: 70px;
    }

    .contentc2000{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .image_f1000{
        height: 30px;
        margin-left: 5px;
    }

    .link_f1000{
        text-decoration: none;
        font-size: 14px;
        color: rgba(80, 80, 80, 1);
    }

    .link_f1000:hover{
        color: rgba(0, 179, 138, 1);
    }

</style>